<template>
  <div class="search-container">
    <!-- 搜索栏 -->
    <form action="/">
      <van-search
        v-model="searchText"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch(searchText)"
        @cancel="$router.back()"
        @focus="isResultShown = false"
      />
    </form>
    <!-- /搜索栏 -->

    <!-- 搜索结果 -->
    <search-result v-if="isResultShown" :search-text="searchText" />
    <!-- /搜索结果 -->

    <!-- 联想建议 -->
    <search-suggestion v-else-if="searchText" :search-text="searchText" 
    @search="onSearch"
    />
    <!-- /联想建议 -->

    <!-- 历史记录 -->
    <search-history v-else />
    <!-- /历史记录 -->
  </div>
</template>

<script>
import SearchSuggestion from "@/components/search-suggestion";
import SearchHistory from "@/components/search-history";
import SearchResult from "@/components/search-result";
export default {
  name: "SearchIndex",
  components: {
    SearchSuggestion,
    SearchHistory,
    SearchResult,
  },
  data() {
    return {
      searchText: "", //搜索输入框的内容
      isResultShown: false, //控制搜索结果的显示状态
    };
  },
  methods: {
    onSearch(searchText) {
      // 把输入框设置为你要搜索的文本
      this.searchText =searchText
      //展示搜索结果
      this.isResultShown = true;
    },
  },
};
</script>

<style lang="less" scoped>
.search-result {
  position: fixed;
  left: 0;
  right: 0;
  top: 54px;
  bottom: 0;
  overflow-y: auto;
}
</style>